<template>
  <div class="avatar">
    <div class="pro" ref="avatars"></div>
    <div class="avatar-img">
      <img v-if="data.headPortraitKey" :src="data.headPortraitKey" alt="">
      <div v-else class="avatars"/>
      <p class="upload">
        <van-uploader :after-read="beforeRead" >
          <span><van-icon name="edit" /> <qq>Edit</qq></span>
        </van-uploader>
      </p>
    </div>
  </div>
</template>

<script >
import {changeHeadLogo, getCreditConfig, uploadV2} from "@/api/apiFox";
import {Toast} from "vant";

  export default {
    props:['data','present'],
    methods:{
      getList(){
        getCreditConfig().then(res=>{
         let total =  res.config[1]
          let p = ((res.credit/total)*360).toFixed(0)
          this.$nextTick(()=>{
            this.$refs.avatars.style.background = ` conic-gradient(#94E56E 0deg ${p}deg, rgba(133,133,138,0.2) 50deg 360deg)`
          })
        }).catch(err=>{})
      },
      beforeRead(file){
        uploadV2(file).then(res=>{
          changeHeadLogo({img:res.url}).then(response=>{
            Toast.success(this.$t('Success'))
            this.$emit('updateAvatar',res.url)
          }).catch(err=>{})
        }).catch(err=>{})
      }
    },
    mounted() {

      this.getList()
    }
  }
</script>

<style scoped lang="scss">
.avatar{
  width: 120px;
  height: 120px;
  //background: rgba(133,133,138,0.2);
  position: relative;
  .pro{
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(#94E56E 0deg 0deg, rgba(133,133,138,0.2) 50deg 360deg)
  }
  .avatar-img{
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 50%;
    position: relative;
    img{
      width: 108px;
      height: 108px;
      background: #fff;
      object-fit: cover;
      border-radius: 50%;
    }
    .avatars{
      width: 108px;
      height: 108px;
      background: #fff;
      object-fit: cover;
      border-radius: 50%;
    }
    .upload{
      position: absolute;
      bottom: 5px;
      font-size: 14px;
      span{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3F3F3F;
        padding: 1px 10px;
        background: rgba(255,255,255,0.5);
        border-radius: 10px;
      }
    }
  }
}
</style>